/**
 * redmicro all Copyright (c) 
 * Created by seeker910 on 2023/5/30.
 * 图片编辑框，抠图
 */
Rsd.define('Rsd.tool.ImageEditor', {
    extend: 'Rsd.container.Dialog',
    requires: [
        'Rsd.form.Button'
    ],
    xtype: 'image-editor',
    border: false,
    title: '图片编辑器',
    height: '80%',
    width: "80%", 
    layout: 'vbox', 
    style:{
        maxHeight:800,
        maxWidth:1200,
    },
    /**
     * 图片地址
     */
    imageSrc:'',
    /**
     * 处理后图片
     */
    imageSegmentedSrc:'',
    //
    items: [
        {
            xtype:'container',
            header:{
                position:'top',
                align:'left',
                height:'50px',
                style:{fontSize:'120%'},
                text:'&nbsp;抠图工具&nbsp;'
            },
            flex:1,
            width:'100%',
            layout:'hbox',
            style:{minHeight:600},
            items:
            [
                {
                    height:'95%',
                    width:20
                },
               {
                    xtype:'image',
                    id:'origin_img',
                    label:{
                        position:'bottom',
                        align:'center',
                        text:'原始图片，点击查看大图'
                    },
                    toolbar:false,
                    readonly:true,
                    onclick:'showView',
                    //toolbar:true,
                    height:'95%',
                    flex:600
               },
               {
                   height:'95%',
                   width:20
               },
               {
                    xtype:'image',
                    id:'seg_img',
                    label:{
                        position:'bottom',
                        align:'center',
                        text:'抠图后的图片效果，点击查看大图'
                    },
                    from:'local',
                    readonly:true,
                    onclick:'showView',
                    toolbar:false,
                    border:true,
                    height:'95%',
                    flex:600
                },
                {
                    height:'95%',
                    width:20
                }
            ]
        },
        {
            xtype:'container',
            layout:{type:'hbox',align:'left'},
            //style:{paddingLeft:'30px'},
            height:70,
            width:'100%',
            items:[
                {
                    flex:2
                },
                {
                    xtype:'button',
                    height:40,
                    width:120, 
                    text:'抠 图',
                    handler:'btn_image_matting'
                },
                {
                    xtype:'button', 
                    height:40,
                    width:120, 
                    text:'下 载',
                    handler:'btn_image_download'
                },
                {
                    xtype:'button', 
                    height:40,
                    width:120, 
                    text:'另存为',
                    handler:'btn_image_save'
                },
                {
                    width:20
                }
            ]
            
       }
    ],
    //抠图 响应事件
    segmentImageFn:'segmentImageHandler',
    
    /**
     * 
     */
    constructor: function ImageEditor(config) {
        config = config || {};
        this.apply(config);
        this.items[0].items[1].src = this.imageSrc; 
        this.items[0].items[3].src = this.imageSegmentedSrc;
    },
    /**
     * 抠图
     */
    btn_image_matting:function btn_image_matting()
    {
        var me = this;
        var origin_img = me.items[0].items[1];
        var file = origin_img.getSrc();
        if(file == null)
        {
            Rsd.popup('请选择图片');
            return;
        }
        if(file.startWith("data:image/"))
        {
            Rsd.popup('图片先上传后，再抠图');
            return;
        }
       
        me.funApplyByIOC(me.segmentImageFn,[me.data||{}]);
 
    },
     
    /**
     * 从本地下载
     */
    btn_image_download:function btn_image_download()
    {
        var me = this;
        var origin_img = me.items[0].items[1];
        var new_img = me.items[0].items[3];
         
        if(Rsd.isEmpty(new_img.image.src) || new_img.image.src == "#" || new_img.image.src == "javascript:void(0);")
        {
            Rsd.alert('图片不存在');
            return;
        }
        Rsd.downloadImage(new_img.image,origin_img.getFileName());
    },
    /**
     * 从服务端下载 保存到OSS
     */
    btn_image_save:function btn_image_save()
    {
        Rsd.alert('暂未实现：服务端实现');
        //上传 抠图后的图片
        
        //选择 保存相册

        //提交 服务端保存
    }
});